<!-- 老师个人信息 -->
<template>
	<view class="container">
		<view class="c-form">
			
			<view class="form-alert" v-if="applyStatus">
				<u-alert :title="alertText" type="warning" :description="description"></u-alert>
			</view>
			<view class="form-info">
				<u-form :model="teacherInfo" ref="form" :rules="rules" label-width="150rpx" required>
					<u-form-item label="姓名" prop="name" required>
						<u-input placeholder="输入姓名" v-model="teacherInfo.name" @blur="nameBlur" :disabled="isDisabled">
						</u-input>
					</u-form-item>

					<u-form-item label="民族" prop="nation" required>
						<u-input placeholder="输入民族" v-model="teacherInfo.nation" :disabled="isDisabled"></u-input>
					</u-form-item>

					<u-form-item label="联系电话" prop="mobile" required>
						<u-input placeholder="输入联系电话" v-model="teacherInfo.mobile" disabled></u-input>
					</u-form-item>
					<!-- <u-form-item label="邮箱地址" prop="email" required>
						<u-input placeholder="输入邮箱地址" v-model="teacherInfo.email" :disabled="isDisabled"></u-input>
					</u-form-item> -->
					<u-form-item label="邮寄地址" prop="address" required>
						<u-textarea v-model="teacherInfo.address" placeholder="输入收货地址" autoHeight
							:disabled="isDisabled"></u-textarea>
					</u-form-item>
					<u-form-item label="工作单位" prop="organ_name" required>
						<!-- <u-input placeholder="输入联系人电话" v-model="teacherInfo.organ_name" :disabled="isDisabled">
						</u-input> -->
						<view class="" style="width: 100%;z-index: 99999;">
							
							<uni-combox @input="searchOrg" :candidates="orgList" placeholder="输入单位名称搜索" v-model="teacherInfo.organ_name" :emptyTips="emptyTips"></uni-combox>
						</view>
					</u-form-item>
					<u-form-item label="单位地址" prop="organ_address" required>
						<u-textarea v-model="teacherInfo.organ_address" placeholder="输入收货地址" autoHeight
							:disabled="isDisabled"></u-textarea>
					</u-form-item>
					

					<u-form-item label="国籍" prop="national" required>
						<u-radio-group v-model="teacherInfo.national" :disabled="isDisabled">
							<u-radio label="中国" :name="1"></u-radio>
							<u-radio :customStyle="{marginLeft:'40rpx'}" label="港澳台" :name="2"></u-radio>
							<u-radio :customStyle="{marginLeft:'40rpx'}" label="国外" :name="3"></u-radio>
						</u-radio-group>
					</u-form-item>

					<u-form-item label="证件类型" prop="document_type" required>
						<u-radio-group v-model="teacherInfo.document_type" :disabled="isDisabled">
							<u-radio label="身份证" :name="1"></u-radio>
							<u-radio :customStyle="{marginLeft:'40rpx'}" label="护照" :name="2"></u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="证件号码" prop="document_nums" required>
						<u-input placeholder="输入证件号码" v-model="teacherInfo.document_nums"
							:disabled="!teacherInfo.document_type"></u-input>
					</u-form-item>
					<u-form-item label="性别" prop="sex" required>
						<u-radio-group v-model="teacherInfo.sex"
							:disabled="!teacherInfo.document_type || teacherInfo.document_type==1">
							<u-radio label="男" :name="1"></u-radio>
							<u-radio :customStyle="{marginLeft:'40rpx'}" label="女" :name="2"></u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="出生日期" prop="birth" required>
						<view class=""
							@click="!teacherInfo.document_type || teacherInfo.document_type==1?false:dateShow = true">
							<u-input placeholder="选择出生日期" v-model="teacherInfo.birth" disabled></u-input>
						</view>
						<u-datetime-picker :show="isDisabled?false:dateShow" mode="date" @cancel="dateShow = false"
							@confirm="datePickerConfirm" :minDate="minStamp" :maxDate="maxStamp"></u-datetime-picker>
					</u-form-item>

					<u-form-item label="头像寸照(2寸)" prop="document_img" labelWidth="250rpx" labelPosition="top" required>
						<view class="" style="margin: 0 atuo;">
							<u-upload width="200rpx" height="200rpx" :uploadIconColor="'#666'" :uploadIcon="'plus'"
								:fileList="fileList.doc" :previewFullImage="true" @afterRead="afterRead($event,1)"
								@delete="deletePic($event,1)" name="1" :maxCount="1"></u-upload>
						</view>
					</u-form-item>
					<u-form-item label="艺术照" prop="art_img" labelWidth="250rpx" labelPosition="top"  required>
						<view class="" style="margin: 0 atuo;">
							<u-upload width="200rpx" height="200rpx" :uploadIconColor="'#666'" :uploadIcon="'plus'"
								:fileList="fileList.art" :previewFullImage="true" @afterRead="afterRead($event,2)"
								@delete="deletePic($event,2)" name="1" :maxCount="1"></u-upload>
						</view>
					</u-form-item>
					<u-form-item label="毕业院校" prop="grad_school" required>
						<u-input placeholder="输入毕业院校" v-model="teacherInfo.grad_school" :disabled="isDisabled">
						</u-input>
					</u-form-item>
					<u-form-item label="学历" prop="educational" required>
						<u-input placeholder="输入学历" v-model="teacherInfo.educational" :disabled="isDisabled">
						</u-input>
					</u-form-item>
					
					<u-form-item label="毕业证照片" prop="grad_card_img" labelWidth="250rpx" labelPosition="top"  required>
						<view class="" style="margin: 0 atuo;">
							<u-upload width="200rpx" height="200rpx" :uploadIconColor="'#666'" :uploadIcon="'plus'"
								:fileList="fileList.grad" :previewFullImage="true" @afterRead="afterRead($event,3)"
								@delete="deletePic($event,3)" name="1" :maxCount="1"></u-upload>
						</view>
					</u-form-item>

					<u-form-item>
						<view class="" v-if="applyStatus">
							<u-button text="提交" type="primary" @click="issueForm" v-if="status!='teacher'" shape="circle"></u-button>
							<u-button text="提交" type="primary" @click="saveForm" shape="circle" v-else></u-button>
						</view>
						<view class="" v-else>
							<u-button text="保存" type="primary" @click="saveForm" shape="circle"></u-button>
						</view>
					</u-form-item>
				</u-form>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: "",
		data() {
			return {
				// 机构选择提示
				emptyTips:"无匹配机构名称",
				// 搜索机构列表
				orgList:[],
				// 是否申请中
				applyStatus: false,
				// 审核原因
				description: null,
				// 审核提示
				alertText: "请完善所有信息后提交申请",
				// 是否禁填
				isDisabled: false,
				// 照片
				fileList: {
					doc: [],
					art: [],
					grad: []
				},
				// 日期选择器控件状态
				dateShow: false,
				// 用户身份
				status: this.$store.state.status,
				// 老师信息
				teacherInfo: {
					user_id: '',
					name: null,
					sex: null,
					birth: null,
					national: null,
					nation: null,
					grad_card_img: null,
					grad_school: null,
					email: null,
					art_img: null,
					document_type: null,
					document_nums: null,
					document_img: null,
					mobile: null,
					address: null,
					organ_name: null,
					organ_address: null,
					educational:null
				},
				// 表单校验
				rules: {
					'name': {
						required: true,
						message: '请填写姓名',
						trigger: ['blur']
					},
					'document_nums': [{
							required: true,
							message: '请填写证件号码',
							trigger: ['blur']
						},
						{
							message: '身份证号码错误',
							trigger: ['blur'],
							validator: (rule, value, callback) => {
								if (uni.$u.test.idCard(value)) {
									let birth = value.slice(6, 14)
									this.teacherInfo.birth =
										`${birth.slice(0,4)}-${birth.slice(4,6)}-${birth.slice(6,8)}`
									this.teacherInfo.sex = value.slice(16, 17) % 2 == 0 ? 2 : 1
									return true
								} else {
									if (this.teacherInfo.document_type == 1) {
										return false
									} else {
										return
									}
								}
							},
						}
					],
					'sex': {
						type: 'number',
						required: true,
						message: '请选择性别',
						trigger: ['change']
					},
					'birth': {
						required: true,
						message: '请选择生日',
						trigger: ['change']
					},
					'national': {
						type: 'number',
						required: true,
						message: '请选择国籍',
						trigger: ['change']
					},
					'nation': {
						required: true,
						message: '请填写民族',
						trigger: ['blur']
					},
					'organ_name': {
						required: true,
						message: '请填写培训机构',
						trigger: ['blur']
					},
					'train_teacher_name': {
						required: true,
						message: '请填写指导老师姓名',
						trigger: ['blur']
					},
					'train_teacher_mobile': {
						required: true,
						message: '请填写指导老师联系电话',
						trigger: ['blur']
					},
					'document_type': {
						type: 'number',
						required: true,
						message: '请选择证件类型',
						trigger: ['change']
					},
					'document_img': {
						required: true,
						message: '请上传证件照',
						trigger: ['blur']
					},
					'grad_card_img': {
						required: true,
						message: '请上传毕业证照',
						trigger: ['blur']
					},
					'art_img': {
						required: true,
						message: '请上传艺术照',
						trigger: ['blur']
					},
					'name': {
						required: true,
						message: '请填写联系人姓名',
						trigger: ['blur']
					},
					'mobile': {
						required: true,
						message: '请填写联系人电话',
						trigger: ['blur']
					},
					'address': {
						required: true,
						message: '请填写邮寄地址',
						trigger: ['blur']
					},
					'grad_school': {
						required: true,
						message: '请填写毕业院校',
						trigger: ['blur']
					},
					'organ_address': {
						required: true,
						message: '请填写单位地址',
						trigger: ['blur']
					},
					'educational': {
						required: true,
						message: '请填写学历',
						trigger: ['blur']
					},
				}
			}
		},
		onLoad(query) {
			if (this.status == 'teacher') {
				this.getTeacherInfo()
			} else {
				this.applyStatus = true
				this.teacherInfo.mobile = uni.getStorageSync('userInfo').mobile
			}
		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			// 搜索单位名称
			searchOrg(val){
				this.emptyTips = "正在搜索中..."
				this.$http.getOrgList({organ_name:val}).then(res=>{
					this.emptyTips = "无匹配机构名称"
					this.orgList = res.data.map(item=>{
						return item.name
					})
				})
			},
			// 重新提交老师申请信息
			saveForm() {
				this.$http.updateTeacherInfo(this.teacherInfo).then(res => {
					if(res){
						uni.$u.toast("保存成功")
						this.getTeacherInfo()
						if(!this.applyStatus){
							this.navigateBack()
						}
					}
				})
			},
			// 获取老师信息
			getTeacherInfo() {
				this.$http.getTeacherInfo().then(res => {
					this.applyStatus = false
					this.teacherInfo = res
					this.fileList = {
						doc: [{
							url: this.baseURL + this.teacherInfo.document_img
						}],
						art: [{
							url: this.baseURL + this.teacherInfo.art_img
						}],
						grad: [{
							url: this.baseURL + this.teacherInfo.grad_card_img
						}]
					}
					if (!uni.getStorageSync("userInfo").identityData) {
						this.getUserInfo()
					}
				}).catch(err => {
					this.description = null
					this.applyStatus = true
					// this.isDisabled = true
					this.alertText = err.msg
					if (err.data.check_remarks) {
						this.description = "驳回原因:" + err.data.check_remarks
						this.isDisabled = false
					}
					this.teacherInfo = err.data.teacherData
					this.fileList = {
						doc: [{
							url: this.baseURL + this.teacherInfo.document_img
						}],
						art: [{
							url: this.baseURL + this.teacherInfo.art_img
						}],
						grad: [{
							url: this.baseURL + this.teacherInfo.grad_card_img
						}]
					}
				})
			},
			// 图片上传后
			afterRead(e, code) {
				// code: 1：证件照 2：艺术照 3：毕业证照片
				// 微信小程序不支持多张图片上传
				uni.uploadFile({
					url: this.baseURL + '/api/common/upload',
					filePath: e.file.url,
					name: 'file',
					header: {
						"token": this.$store.state.token
					},
					success: (res) => {
						if (res.statusCode == 200) {
							let result = JSON.parse(res.data)
							let {
								data: {
									fullurl,
									url
								}
							} = result
							switch (Number(code)) {
								case 1:
									this.teacherInfo.document_img = url
									this.fileList.doc = [{
										url: fullurl
									}]
									break;
								case 2:
									this.teacherInfo.art_img = url
									this.fileList.art = [{
										url: fullurl
									}]
									break;
								case 3:
									this.teacherInfo.grad_card_img = url
									this.fileList.grad = [{
										url: fullurl
									}]
									break;
							}
						} else {
							let result = JSON.parse(res.data)
							uni.$u.toast(result.msg)
						}

					},
					fail: (err) => {
						uni.$u.toast(err)
					}
				})
			},
			// 删除图片
			deletePic(e, code) {
				if (this.isDisabled) return
				switch (Number(code)) {
					case 1:
						this.fileList.doc = []
						break;
					case 2:
						this.fileList.art = []
						break;
					case 3:
						this.fileList.grad = []
						break;
				}
			},
			// 日期选择
			datePickerConfirm(obj) {
				this.dateShow = false
				this.teacherInfo.birth = uni.$u.timeFormat(obj.value)
			},
			// 保存完善信息
			issueForm() {
				this.$refs.form.validate().then(res => {
					this.$http.saveTeacherInfo(this.teacherInfo).then(res => {
						uni.$u.toast("已提交，请等待系统审核")
						this.getTeacherInfo()
						this.getUserInfo()
					}).catch(err => {
						uni.$u.toast(err.msg)
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {

		.c-form {
			// padding-top: 100rpx;

			.form-btn {
				width: 100%;
				height: 100rpx;
				background-color: #ddd;
				position: fixed;
				top: 0;
				left: 0;
				z-index: 9999;
				display: flex;
				justify-content: flex-end;
				align-items: center;

				&>text {
					font-size: 32rpx;
					font-weight: bold;
					padding: 0 20rpx;
				}
			}
		}
		.form-info {
			padding-top: 90rpx;
			background-color: #fff;
			padding: 0 30rpx;
			box-sizing: border-box;
		}
	}
</style>
